<template>
<div>
<!--  业务收费汇总  -->
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="业务收费汇总表" name="1">

      <el-form :inline="true" :model="lsYeWuShouFeiForm" class="demo-form-inline">
      <el-form-item label="领用日期:">
        <el-date-picker
            v-model="dateData"
            type="monthrange"
            format="yyyy-MM"
            value-format="yyyy-MM"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
        </el-date-picker>
      </el-form-item>
        <el-form-item>
          <el-button @click="querylsYeWuShouFei">检索</el-button>
        </el-form-item>
      </el-form>

      <div v-if="lsYeWuShouFeiShow">
      <p style="text-align: center;font-size: 30px;font-weight:bold">律所业务收费汇总表</p>

      <el-table
          show-summary
          :data="lsYeWuShouFei"
          style="width: 100%">
        <el-table-column
            prop="yf"
            label="月份">
        </el-table-column>
        <el-table-column
            prop="hetong"
            label="合同金额">
        </el-table-column>
        <el-table-column
            prop="kaipiao"
            label="开票金额">
        </el-table-column>
        <el-table-column
            prop="case_paidsal"
            label="收款金额">
        </el-table-column>
      </el-table>
      </div>


    </el-tab-pane>
    <el-tab-pane label="个人业务总计汇总表" name="2">

      <el-form :inline="true" :model="grYeWuShouFeiForm" class="demo-form-inline">
        <el-form-item label="领用日期:">
          <el-date-picker
              v-model="dateData"
              type="monthrange"
              format="yyyy-MM"
              value-format="yyyy-MM"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="querylsYeWuShouFei">检索</el-button>
        </el-form-item>
      </el-form>

      <div v-if="grYeWuShouFeiShow">
        <p style="text-align: center;font-size: 30px;font-weight:bold">个人业务总计汇总表</p>

        <el-table
            show-summary
            :data="grYeWuShouFei"
            style="width: 100%">
          <el-table-column
              prop="yf"
              label="月份">
          </el-table-column>
          <el-table-column
              prop="hetong"
              label="合同金额">
          </el-table-column>
          <el-table-column
              prop="kaipiao"
              label="开票金额">
          </el-table-column>
          <el-table-column
              prop="case_paidsal"
              label="收款金额">
          </el-table-column>
        </el-table>
      </div>

    </el-tab-pane>
    <el-tab-pane label="个人业务月份汇总表" name="3">个人业务月份汇总表</el-tab-pane>
    <el-tab-pane label="出纳统计" name="4">出纳统计</el-tab-pane>
    <el-tab-pane label="分类开票汇总" name="5">分类开票汇总</el-tab-pane>
    <el-tab-pane label="法律顾问统计" name="6">法律顾问统计</el-tab-pane>
  </el-tabs>





</div>
</template>

<script>
export default {
  name: "chargeSummary",
  data(){
    return{
      lsYeWuShouFeiShow:false,
      grYeWuShouFeiShow:false,
      activeName:'1',
      lsYeWuShouFei:[],// 律所业务收费汇总表数据
      grYeWuShouFei:[],// 个人业务收费汇总表数据
      dateData:[],// 表单时间
      lsYeWuShouFeiForm:{// 律所业务收费汇总表查询数据
        dateStart:'',
        dateEnd :'',
      },
      grYeWuShouFeiForm:{// 个人业务收费汇总表查询数据
        dateStart:'',
        dateEnd :'',
      },

    }
  },
  created() {

  },
  methods:{
    handleClick(){

    },
    querylsYeWuShouFei(){ // 律所业务收费汇总表查询

      this.lsYeWuShouFeiShow = true
      if(this.dateData.length < 1){
        this.$message.error('请将填写正确的时间范围!');
        return
      }
      this.lsYeWuShouFeiForm.dateStart = this.dateData[0]
      this.lsYeWuShouFeiForm.dateEnd = this.dateData[1]
      console.log(this.dateData)

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("statistics/lsYeWuShouFei" , {params:this.lsYeWuShouFeiForm})
      .then( res => {
        setTimeout(() => {
          loading.close();
        });
        this.lsYeWuShouFei = res.data.data
      } )
      .catch()

    },

  }
}
</script>

<style scoped>

</style>